<script setup>
  import request from "@/utils/request";
  import { useRoute } from "vue-router";
  import { useStore } from "vuex";
  const { state } = useStore();
  let userId = computed(() => state.userId);
  const id = JSON.parse(localStorage.getItem("user")).userId;
  let route = useRoute();
  const postId = route.query.postId;

  let post = ref({});
  let userInfo = ref({});
  let evaluateList = ref([]);
  let evaNull = ref(false);
  let like = ref(true);
  let processNum = ref(0);
  let investment = ref(false);
  let culRole = ref(true);
  let investmentProgress = ref({});
  let cooperationList = ref([]);
  let cooperations = ref({});
  let cooperation = ref(true);
  let cooperationStart = ref(false);
  let specialRole = ref(false);
  let role = ref("");
  let cooperationItem;
  let start = ref("");
  let choose = ref("");
  let enter = ref("");
  let talk = ref("");
  let end = ref("");
  const input = ref('')

  onBeforeMount(() => {
    if (userId.value) {
      role = JSON.parse(localStorage.getItem("user")).role;
      cooperationItem = {
        role: JSON.parse(localStorage.getItem("user")).role,
        roleId: JSON.parse(localStorage.getItem("user")).roleId,
        name: JSON.parse(localStorage.getItem("user")).name,
      };
    }
    request.get(`/post/getOne/${postId}`).then((res) => {
      post.value = res.data;
      if (res.data.sort === "招商贴") {
        investment.value = true;
      }
      if (role === "manufacturer") {
        culRole.value = false;
      }
      if (
        (role === "manufacturer" || role === "inheritor") &&
        post.value.role != role
      ) {
        specialRole.value = true;
      }
      getUserInfo();
      getInvestmentProcess();
      getEvaluateList();
    });
  });

  const addEvaluate = () => {
    if (input.value === "") {
      ElMessage.warning("评论为空，请输入评论");
    } else {
      var evaluate = {
        postId: postId,
        userId: id,
        detail: input.value
      };
      console.log(evaluate);
      request.post(`/postEvaluateMain/insertOne` , evaluate).then((res) => {
        if (res.code == -1) {
          console.log(res.msg);
        } else {
          console.log(evaluate);
          getEvaluateList();
        }
      });
    }
  };

  const getUserInfo = () => {
    request.get(`/user/getOne/` + post.value.userId).then((res) => {
      if (res.code == -1) {
        console.log(res.msg);
      } else {
        userInfo.value = res.data;
      }
    });
  };

  const reachCooperation = () => {
    cooperationItem.proId = investmentProgress.value.investmentId;
    request
      .post(`/cooperations/insertOne`, cooperationItem)
      .then((res) => {
        if (res.code == -1) {
          ElMessage.warning(res.msg);
        } else {
          ElMessage.success("期待与您的合作");
          getInvestmentProcess();
        }
      })
      .catch(() => {
        ElMessage.warning("您所属的公司已在合作列表中了");
      });
  };

  const formatDate = (value) => {
    var dt = new Date(value);
    let year = dt.getFullYear();
    let month = (dt.getMonth() + 1).toString().padStart(2, "0");
    let date = dt.getDate().toString().padStart(2, "0");
    return `${year}-${month}-${date}`;
  };

  const formatDate1 = (value) => {
    var dt = new Date(value);
    let month = (dt.getMonth() + 1).toString().padStart(2, "0");
    let date = dt.getDate().toString().padStart(2, "0");
    return `${month}-${date}`;
  };

  const formatDate3 = (value) => {
    var dt = new Date(value);
    let year = dt.getFullYear();
    let month = (dt.getMonth() + 1).toString().padStart(2, "0");
    let date = dt.getDate().toString().padStart(2, "0");
    let hour = dt.getHours().toString().padStart(2, "0");
    let minute = dt.getMinutes().toString().padStart(2, "0");
    let second = dt.getSeconds().toString().padStart(2, "0");
    return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
  };

  const getProcessTime = () => {
    start.value =
      formatDate(investmentProgress.value.startTime) +
      "~" +
      formatDate1(investmentProgress.value.chooseTime);
    choose.value =
      formatDate(investmentProgress.value.chooseTime) +
      "~" +
      formatDate1(investmentProgress.value.enterTime);
    enter.value =
      formatDate(investmentProgress.value.enterTime) +
      "~" +
      formatDate1(investmentProgress.value.talkTime);
    talk.value =
      formatDate(investmentProgress.value.talkTime) +
      "~" +
      formatDate1(investmentProgress.value.endTime);
    end.value = formatDate(investmentProgress.value.endTime);
  };

  const getInvestmentProcess = () => {
    request.get(`/investmentProgress/getOne/${postId}`).then((res) => {
      if (res.code == -1) {
        console.log(res.msg);
      } else {
        investmentProgress.value = res.data;
        cooperationList.value = res.data.cooperationList;
        let progress = res.data.progress;
        if (investmentProgress.value.cooperation === null) {
          cooperation.value = false;
        } else {
          request
            .get(`/cooperations/getOne/${investmentProgress.value.cooperation}`)
            .then((res) => {
              cooperations.value = res.data;
            });
        }
        getProcessTime();
        if (progress === "start") {
          processNum.value = 0;
          cooperationStart.value = true;
        } else if (progress === "choose") {
          processNum.value = 1;
        } else if (progress === "enter") {
          processNum.value = 2;
        } else if (progress === "talk") {
          processNum.value = 3;
        } else if (progress === "end") {
          processNum.value = 5;
        }
      }
    });
  };

  const getEvaluateList = () => {
    request
      .get(`/postEvaluateMain/getPart/${post.value.postId}?pageNum=1`)
      .then((res) => {
        if (res.code == -1) {
          console.log(res.msg);
          evaNull.value = true;
        } else {
          console.log(res.data);
          evaluateList.value = res.data.evaMainList;
          if (evaluateList.value.length === 0) {
            evaNull.value = true;
          }
        }
      });
  };

  const likeChange = () => {
    like.value = !like.value;
  };
</script>

<template>
  <div class="main">
    <!-- 帖子内容部分 -->
    <div>
      <h1 class="title">{{ post.title }}</h1>
      <div class="postInfo">
        <div>
          <img :src="userInfo.image" style="width: 50px; border-radius: 25px" />
        </div>
        <div>
          <el-icon>
            <i-ep-User />
          </el-icon><span>{{ userInfo.name }}</span>
        </div>
        <div>
          <el-icon>
            <i-ep-View />
          </el-icon><span>{{ post.views }}</span>
        </div>
        <div class="like" @click="likeChange">
          <el-icon v-if="!like">
            <i-ep-Medal color="gold" />
          </el-icon>
          <el-icon v-if="like">
            <i-ep-Medal />
          </el-icon><span>{{ post.likeCount }}</span>
        </div>
      </div>
      <v-md-editor :model-value="post.detail" mode="preview"></v-md-editor>
    </div>

    <!-- 招商进度部分 -->
    <div class="steps" v-show="investment">
      <el-steps :active="processNum" align-center>
        <el-step title="招商进行中" :description="start" />
        <el-step title="选择合作方" :description="choose" />
        <el-step title="确认合作方" :description="enter" />
        <el-step title="产品研讨" :description="talk" />
        <el-step title="确认合作" :description="end" />
      </el-steps>

      <div>
        <div class="cooperationList">
          <el-divider v-show="culRole">寻求合作的制造商</el-divider>
          <el-divider v-show="!culRole">寻求合作的传承人</el-divider>
          <div v-for="cooperation in cooperationList" style="text-align: center">
            {{ cooperation.name }}
          </div>

          <el-divider v-show="cooperation">确认的合作商</el-divider>
          <div v-show="cooperation" style="text-align: center">
            {{ cooperations.name }}
          </div>
        </div>

        <div v-show="specialRole && cooperationStart" style="text-align: center">
          <el-button style="width: 150px" @click="reachCooperation">我要合作</el-button>
        </div>
      </div>
    </div>

    <!-- 评论部分 -->
    <div>
      <el-divider>评论</el-divider>
      <div style="display: flex; ">
        <el-input v-model="input" placeholder="请输入评论：" style="margin-right:5px;"></el-input>
        <el-button @click="addEvaluate">发表</el-button>
      </div>

      <div v-for="item in evaluateList" v-show="!evaNull">
        <div class="evaluateBox">
          <el-avatar shape="square" :src="item.userImage" size="large" />
          <div class="infoBox">
            <p style="font-size: small">{{ item.userName }}</p>
            <p>{{ item.detail }}</p>
            <p style="font-size: 2px; color: grey">
              {{ formatDate3(item.createTime) }}
            </p>
          </div>
        </div>
      </div>
      <div class="empty" v-show="evaNull">
        <el-empty description="暂无评论~~" />
      </div>
    </div>

    <!-- 添加评论部分 -->
    <div></div>
  </div>
</template>

<style lang="less" scoped>
  .main {
    width: 60%;
    margin: 0 auto;
  }

  .title {
    text-align: center;
  }

  .postInfo {
    height: 50px;
    display: flex;
    padding: 0 2.5rem;
  }

  .postInfo>div {
    margin-right: 15px;
    align-self: center;
  }

  .postInfo span {
    margin-left: 5px;
  }

  .like:hover {
    cursor: pointer;
  }

  .steps {
    margin: 50px auto;
  }

  .cooperationList {
    margin: 20px auto;
    width: 60%;
  }

  .evaluateBox {
    margin-top: 20px;
    display: flex;
    padding: 0 2.5rem;
  }

  .infoBox {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 10px;
  }
</style>